<template>
  <h2>侦听器-watch</h2>
  <span id="span">count: {{ count }}</span>
  <button @click="add">+</button>

  <hr />

  <span>{{ obj }}</span>
  <button @click="fn">btn</button>

  <hr />

  <input type="text" v-model="textValue" />
</template>

<script>
import { ref, watch, watchEffect, onMounted } from "vue";
export default {
  setup() {
    const count = ref(1);
    const add = () => {
      count.value++;
    };

    const obj = ref({ a: 3 });
    const fn = () => {
      obj.value.b = 4;
    };

    // watch函数调用接收三个参数，第一个是要侦听的值
    // 第二个是回调函数, 回调函数可以接收val和oldVal
    // 第三个是选项对象

    // watch函数是可以有返回值的，是一个函数，再次调用这个函数，侦听就停止了
    const unWatch = watch(
      count,
      (val, oldVal) => {
        console.log(
          "count改变了",
          val,
          oldVal,
          document.querySelector("#span").innerHTML
        );
      },
      {
        // 让我们的回调函数在dom更新之后再触发，默认是数据改变和dom更新中间执行的
        flush: "post",
      }
    );
    onMounted(() => {
      setTimeout(() => {
        unWatch();
      }, 3000);
    });

    watch(
      obj,
      (val) => {
        console.log(val);
      },
      {
        deep: true,
        immediate: true,
      }
    );

    const textValue = ref("");
    // const log = () => {
    //   const v = textValue.value;
    //   setTimeout(() => {
    //     console.log(v);
    //   }, 2000);
    // };

    // log();
    // watch(textValue, () => {
    //   log();
    // });

    watchEffect(() => {
      const v = textValue.value;
      setTimeout(() => {
        console.log(v);
      }, 2000);
    });

    return {
      count,
      add,
      obj,
      fn,
      textValue,
    };
  },
};
</script>
